{% extends 'base.html' %}
{% block title %}
    用户注册
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <style>
        #content {
            width: 40%;
            margin-left: 25%;
            height: 400px;
            padding: 20px;
            background-color: #c0d592;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #000000;
        }

        #content form {
            margin: 20px;
            text-align: left
        }

        #contentForm input {
            margin-top: 10px;
            margin-bottom: 20px;
            width: 300px;
            height: 30px;
            border: none;
            padding: 3px;
            padding-left: 30px;
            border-radius: 5px;
        }

        #btn {
            background: grey;
            color: #f2f2f2;

            padding: 10px 30px 10px 30px;
            font-size: 16px;
            font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
            font-weight: bold;
            border-radius: 3px;
            border: none;
        }
        #btn:hover{
            background: #9e4177;

        }

    </style>
{% endblock %}

{% block content %}

    <div id="content">
        <div id="contentForm">
            <form action="{% url 'user:regist' %}" method="post">
                {% csrf_token %}

                <input type="text" placeholder="请输入用户名" name="username" required=""><br>
                <p>
                    <input type="text" id="input-phone" placeholder="请输入手机号码" name="phone" required="" style="width: 210px;">
                    <input type="button" value="发送验证码" id="send_code" style="width: 80px;height: 36px">
                </p>

                <input type="text" placeholder="4位验证码" id="verification_code" name="verification_code" required=""><br>
                <input type="password" placeholder="请输入密码" id="password" name="password" required=""><br>
                <input type="password" placeholder="请确认密码" id="password1" name="password1" required=""><br>

                <button id="btn">提交注册</button>
            </form>
        </div>
        <script type="text/javascript">
            var baseTime = 90;
            var tryTimes = 1;

            $(function () {
                $("#send_code").css({"padding-left": "0px"});
            });
            $("#send_code").click(function(){
                var phone = $("#input-phone").val()
                for (var i = 0; i < phone.length; ++i) {
                    if (phone[i] < '0' || phone[1] > '9') {
                        alert("手机号只能由11位数字组成~");
                        return;
                    }
                }

                if (phone.length !== 11) {
                    alert("手机号只能由11位数字组成~");
                    return;
                }

                $.ajax({
                    type:'POST',
                    data:{'phone': phone, csrfmiddlewaretoken:'{{ csrf_token }}'},
                    url:'{% url 'user:send_code' %}',
                    datatype: JSON,      //希望返回Json格式的数据
                    success:function (data) {
                        //alert(data.msg);
                    },
                    error:function () {
                        console.log('ajax刷新分页数据失败！');
                    }
                });

                var waitTime = baseTime * tryTimes;
                var intervalId = window.setInterval(function () {
                     if (waitTime === 0){
                         //alert("超时");
                         clearInterval(intervalId);
                         $("#send_code").val('发送验证码');
                         tryTimes += 1
                         return ;
                     }
                     $("#send_code").val(waitTime + 's');
                     waitTime -= 1;
                }, 1000);
            });
        </script>
    </div>
{% endblock %}

{% block my_js %}
    <script>
        window.onload = function () {
            document.getElementById('password').onchange = validatePassword;
            document.getElementById('password1').onchange = validatePassword;
            //document.getElementById('send_code').textContent = "60s";
        };

        function validatePassword() {
            var pass = document.getElementById("password").value;
            var pass1 = document.getElementById("password1").value;
            if (pass != pass1)
                document.getElementById('password1').setCustomValidity("输入两次密码不一致");
            else
                document.getElementById('password1').setCustomValidity("");

        }
    </script>
{% endblock %}